<template>
  <view class="container">

    <view class="box">
      <!-- <view class="title">对公转账信息</view> -->
      <view class="upload_wrapper">
        <!-- <image class="upload_image" mode="widthFix" :src="defaultBg" @click="chooseImg" /> -->
        <view class="upload_image upload_btn" @click="chooseImg">
            <view class="add-icon">+</view>
             <view class="tips">点击上传合同</view>
        </view>
        <image class="upload_image" mode="widthFix" :src="item" v-for="(item) in img" :key="item" />
      </view>
      <!-- <view class="img-list">
        <image class="upload_image" mode="widthFix" :src="defaultBg" v-for="(item) in 20" />
      </view> -->
    </view>
    <view class="btn" @click="submit">提交</view>
  </view>
</template>
<script>
  import {
    upload
  } from "@/utils/request.js";
  import {
    accountInfo,
    uploadPay
  } from '@/api/hire.js';
  import {
    signing
  } from '@/api/hire.js'
  const defaultBg = 'https://taxi.raxan.xyz/wechat/static/images/hire_upload_201112.png'

  export default {
    data() {
      return {
        id: '',
        type: '',
        img: [],
        defaultBg,
        orzInfo: {}
      }
    },
    onLoad(options) {
      this.id = options.id;
      this.type = options.type;
    },
    methods: {
      submit() {
        if (this.uploading) return;
        this.uploading = true;
        if (!this.img.length) return uni.showToast({
          title: '请选择图片',
          icon: "none"
        });
        const parmas = {
          signature_pic: this.img.join(','),
          id: this.id,
          type: this.type,
        }
        signing(parmas).then(res => {
          uni.reLaunch({
            url: '/pages/myCar/check'
          })
        })
        // uploadPay({
        //   id: this.id,
        //   img: this.img
        // }).then(() => {
        //   uni.showToast({
        //     title: '上传成功等待审核'
        //   });
        //   uni.switchTab({
        //     url: '/pages/hire/index'
        //   });
        // }).finally(() => {
        //   this.uploading = false;
        // })
      },

      chooseImg() {
        if (this.uploading) return;
        this.uploading = true;
        uni.chooseImage({
          count: 1, //默认9
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album'], //从相册选择
          success: (res) => {
            upload(res.tempFilePaths[0]).then((res) => {
              if (res?.data?.url) {
                this.img.push(res?.data?.url)
              }

            }).finally(() => {
              this.uploading = false;
            })
          },
          fail: (err) => {
            this.uploading = false;
            console.log(err)
          }
        });
      }
    }
  }
</script>
<style lang="scss" scoped>
  .container {
    padding: 32rpx;
  }

  .box {
    background-color: #FFFFFF;
    padding: 32rpx;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
  }

  .img-list {
    // padding: 60rpx;
  }

  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 32rpx;
    color: #111E36;
    line-height: 38rpx;
    margin-bottom: 24rpx;
  }

  .text {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #111E36;
    line-height: 33rpx;
    text-align: left;
    margin-bottom: 24rpx;
  }

  .upload_wrapper {
    padding: 24rpx 48rpx 0 48rpx;

    .upload_btn {
      height: 300rpx;
      border: 4rpx #e6e6e6 dotted;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .add-icon{
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        background-color: #008DFF;
        font-size: 118rpx;
        color: #ffffff;
        text-align: center;
        line-height: 100rpx;
      }
      .tips{
        margin-top: 10rpx;
        font-size: 30rpx;
      }
    }

    .upload_image {
      width: 100%;
    }
  }

  .btn {
    line-height: 96rpx;
    color: #F8F9FC;
    text-align: center;
    font-size: 32rpx;
    font-weight: 600;
    background-color: #008DFF;
    border-radius: 12rpx;
    position: fixed;
    left: 32rpx;
    right: 32rpx;
    bottom: 8rpx;
    z-index: 10;
  }
</style>